<template>
  <view class="cate">
  <!-- 搜索框区域 -->
  <my-search @click="toSearch" :radius="6" bgc="#c00000"></my-search>
    <view class="content">
      <!-- 左侧一级导航 -->
      <scroll-view class="content-left" scroll-y="true" :style="{height:`${wh}px`}">
        <view class="content-left-item" @click="changeindex(index)" :class="{active:active===index}" v-for="(item,index) in cateList" :key="index">
          {{item.cat_name}}
        </view>
      </scroll-view>
      <!-- 右侧二级&三级导航 -->
      <scroll-view :scroll-top="scrollTop" class="content-right" scroll-y="true" :style="{height:`${wh}px`}">
        <view class="level2" v-for="(item,index) in cateLevel2" :key="index">
          <view class="level2-title">
            <span>/</span>
            {{item.cat_name}}
            <span>/</span>
          </view>
          <view class="level3">
            <view @click="goList(v)" class="level3-item" v-for="(v,i) in item.children" :key="i">
              <image :src="v.cat_icon" mode=""></image>
              <text>{{v.cat_name}}</text>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
  import mixins from '../../mixins/mixins.js'
  export default {
  mixins:[mixins],
    data() {
      return {
        wh: 0,
        cateList:[],
        active:0,
        // 二级数据
        cateLevel2:[],
        scrollTop: this.scrollTop === 0? 1:0
      };
    },
    onLoad() {
      this.getData()
      uni.getSystemInfo({
        success: (res) => {
          this.wh = res.windowHeight-50
        }
      })
    },
    methods:{
      toSearch(){
        uni.navigateTo({
          url:'/pages/search/search'
        })
      },
      goList(v){
          uni.navigateTo({
          url:`/pages/list/list?key=${v.cat_name}`
        })
      },
      changeindex(index){
        this.active = index
        this.cateLevel2 = this.cateList[index].children
        this.scrollTop = 0
      },
    async getData(){
       const {data:res}  = await uni.$http.get('/api/public/v1/categories').catch(err=>err)
        if(res.meta.status !== 200) return uni.$showMsg()
        this.cateList = res.message
        this.cateLevel2 = this.cateList[0].children
      }
    }
  }
</script>

<style lang="scss">
  .cate {
    .content {
      display: flex;
      &-left {
        width: 130px;
        &-item{
          height: 100rpx;
          text-align: center;
          line-height: 100rpx;
          background-color: #f4f4f4;
          &.active{
            background-color: #fff;
            color: #c00000;
            position: relative;
            &::before{
              content: '';
              width: 4rpx;
              height: 50rpx;
              background-color: #c00000;
              position: absolute;
              top: 50%;
              left: 0;
              transform: translateY(-50%);
            }
          }
        }
      }
    
    &-right{
      .level2{
          text-align: center;
          line-height: 50px;
        &-title{
        span{
          color: #ccc;
          margin: 0 20rpx;
           }
        }
        .level3{
          display: flex;
          flex-wrap: wrap;
          &-item{
            margin-top: 20rpx;
            display: flex;
            flex-direction: column;
            width: 33.33%;
            align-items: center;
            text{
            line-height: 12px;
            font-size: 12px;
            }
            image{
              width: 120rpx;
              height: 120rpx;
            }
          }
        }
      }
    }
  }
  }
</style>
